// src/pages/Si.jsx
import React, { useEffect, useState } from 'react';
import { NavBar, Card, Empty } from 'antd-mobile';
import { motion } from 'framer-motion';
import { fadeIn } from '../styles/animations';
import ScrollingTags from '../components/ScrollingTags';
import ImageDisplay from '../components/ImageDisplay';
import axios from '../api/axios';
import { endpoints } from '../api/endpoints';

const Si = () => {
  const [tags, setTags] = useState([]);
  const [imageUrl, setImageUrl] = useState('');

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.post(endpoints.getTags);
        if (response.data.code === 0) {
          setTags(response.data.data.bilibili);
          setImageUrl(response.data.data.hots);
        }
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, []);

  return (
    <motion.div 
      className="min-h-screen flex flex-col bg-gray-50"
      initial="hidden"
      animate="visible"
      exit="exit"
      variants={fadeIn}
    >  
      <div className="flex-grow flex flex-col items-center justify-center" style={{ height: '90vh', overflow: 'hidden' }}>
        <div className="flex-shrink-0" style={{ maxHeight: '50%', width: '100%', overflow: 'hidden' }}>
          <ImageDisplay imageUrl={imageUrl} />
        </div>
        <div className="flex-shrink-0 w-full" style={{ maxHeight: '50%', overflow: 'hidden' }}>
          <ScrollingTags tags={tags} />
        </div>
      </div>
    </motion.div>
  );
};

export default Si;